<template>
    <div id="Newweek">
        <div class="header">
            <div class="ret" @click="goBack()"></div>
            <img class="header-left" src="../../assets/zfc-img/左箭头.png" alt="左箭头">
            <span>本周新品</span>
            <img class="header-right" src="../../assets/zfc-img/断货王/分享图标.png" alt="分享图标">
        </div>
        <div class="cont">
                 <p>本周新品</p>
                 <p>精选环球好物</p>
        </div>
        <div class="con">
                <img class="conImg" src="../../assets/zfc-img/搜索图标.png" alt="搜索图标">
                <input class="inp" type="text" value="" placeholder="输入商品关键词">
        </div>
        <router-link to="" class="box">
                <div class="boxContent">
                    奶粉也要玩有机，养成健康北鼻
                </div>
                <div class="boxCont">
                <img src="../../assets/img/妈咪宝贝.png" alt="妈咪宝贝">
                </div>
                <div class="boxCt">
                <div class="boxCon">
                    <img src="../../assets/img/奶粉.png" alt="奶粉">
                    <p class="box-con">不易脱妆口红</p>
                    <p class="box-cont">￥59</p>
                </div>
                <div class="boxCon">
                    <img src="../../assets/img/奶粉.png" alt="奶粉">
                    <p class="box-con">花蕊唇彩</p>
                    <p class="box-cont">￥129</p>
                </div>
                <div class="boxCon">
                    <img src="../../assets/img/奶粉.png" alt="奶粉">
                    <p class="box-con">娇吻玉口红</p>
                    <p class="box-cont">￥88</p>
                </div>
                </div>
        </router-link>
        <div class="blank"></div>
        <router-link to="" class="box">
                <div class="boxContent">
                    奶粉也要玩有机，养成健康北鼻
                </div>
                <div class="boxCont">
                <img src="../../assets/img/妈咪宝贝.png" alt="妈咪宝贝">
                </div>
                <div class="boxCt">
                <div class="boxCon">
                    <img src="../../assets/img/奶粉.png" alt="奶粉">
                    <p class="box-con">不易脱妆口红</p>
                    <p class="box-cont">￥59</p>
                </div>
                <div class="boxCon">
                    <img src="../../assets/img/奶粉.png" alt="奶粉">
                    <p class="box-con">花蕊唇彩</p>
                    <p class="box-cont">￥129</p>
                </div>
                <div class="boxCon">
                    <img src="../../assets/img/奶粉.png" alt="奶粉">
                    <p class="box-con">娇吻玉口红</p>
                    <p class="box-cont">￥88</p>
                </div>
                </div>
        </router-link>
        <div class="bottom"></div>
    </div>
</template>
<script>
export default {
    name:'Newweek',
    data() {
        return {
            
        }
    },
    methods: {
         goBack() {
            window.history.back()
        },
    },
}
</script>
<style scoped>
#Newweek{
    width: 100%;
    background-color: #fff;
    position: absolute;
    z-index: 111;
}
 .header{
      width: 100%;
      height: 0.96rem;
      line-height: 0.96rem;
      background-color: #e53e42;
      font-size: 0.36rem;
      color: #fff;
      position: relative;
  }
  .ret{
    width: 0.25rem;
    height: 0.4rem;
    position: absolute;
    left: 0.2rem;
    top: 0.35rem;
    z-index: 100;
}
  .header-left{
      width: 0.25rem;
      height: 0.4rem;
      position: absolute;
      left: 0.2rem;
      top: 0.3rem;
  }
  .header>span{
      margin-left: 2.7rem;
  }
  .header-right{
      width: 0.4rem;
      height: 0.4rem;
      position: absolute;
      left: 6.3rem;
      top: 0.25rem;
  }
  .cont{
      width: 100%;
      height: 1.2rem;
  }
  .cont p:nth-child(1){
      width: 1.45rem;
      height: 0.35rem;
      font-size: 0.36rem;
      color: #e53e42;
      margin: 0.2rem ;
  }
  .cont p:nth-child(2){
      width: 1.8rem;
      height: 0.3rem;
      font-size: 0.3rem;
      margin-left: 0.2rem;
  }
  .con{
      width: 100%;
      height: 0.85rem;
      background-color: #f2f2f2;
  }
  .conImg{
      width: 0.3rem;
      height: 0.3rem;
      position: absolute;
      top: 2.65rem;
      left: 2.3rem;
      z-index: 1;
      
  }
  .inp{
      width: 6.8rem;
      height: 0.5rem;
      text-align: center;
      font-size: 0.24rem;
      border-radius: 0.1rem;
      position: absolute;
      left: 0.05rem;
      top: 2.53rem;
      outline: none;
      border: none;
  }
  .inp::placeholder{
      color: #e53e42;
  }
  /* 奶粉专区 */
  .box{
  display: block;
    width: 100%;
    height: 5.9rem;
    position: relative;
}
.boxContent{
    width: 100%;
    height: 0.8rem;
    position: absolute;
    top: 1.7rem;
    left: 0;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 0.3rem;
    line-height: 0.8rem;
    text-align: center;
}
.boxCont{
    width: 100%;
    height: 3rem;
    text-align: center;
}
.boxCont>img{
    width: 100%;
    height: 3rem;
    border: solid 1px #ccc;
}
.boxCt{
  width: 100%;
  height: 1.9rem;
  display: flex;
  justify-content: space-between;
}
.boxCon{
  width: 100%;
  height: 2.75rem;
  text-align: center;
}
.boxCon>img{
  width: 2.3rem;
  height: 1.6rem;
  margin-top: 0.15rem;
}
.boxCon:nth-child(2) img{
  width: 2.28rem;
  height: 1.6rem;
  border-left: 0.01rem solid #ccc;
  border-right: 0.01rem solid #ccc;
}
.box-con{
  font-size: 0.24rem;
  margin: 0.08rem 0;
}
.box-cont{
  font-size: 0.24rem;
  color: #e83d41;
} 
/* 第二板块 */
.blank{
    width: 100%;
    height: 0.2rem;
    background-color: #f2f2f2;
}
.bottom{
    width: 100%;
    height: 2.3rem;
    background-color: #f2f2f2;
}
</style>